<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大力神股票</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />

		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style>
			.iconStyle{
				font-weight: 600;
				width: 20px;height:20px;margin-top:13px;margin-right:10px;
			}
		</style>


	</head>

	<body>
		<div style="margin-top:44px;" class="mui-content" id="mui-content">

			<div style="z-index:999;width:100%;background:white;position:fixed;top:0;height:44px;border-bottom: 1px solid #ccc;line-height: 44px;text-align: center;">
						<a onclick="javascript:location.href='compare.html'" class="mui-icon  mui-pull-left" style="line-height: 44px;margin-right: 10px;">o</a>
						<a class="mui-icon  mui-pull-left" @click="showMask=true" style="line-height: 44px;margin-right: 10px;color:red;">
							总：{{list.length}}，sz:{{szTotal}},sh{{shTotal}},总盈亏：{{totalSum}},今日盈亏：{{todayTotal}}
								<div id="info" style="float:left;">{{info}}</div>
							</a>

				<a v-if="isPath" @click="isPath=false" style="margin-top:8px;" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
				持有列表


			<select style="width:100px;" v-model="selKey">
				<option value="persent">當日漲跌幅</option>
				<option value="total">市值</option>
				<option value="myPersent">持有漲跌幅</option>
			<option value="isOpen">提醒开关</option>
			<option value="buy">买入度</option>
			<option value="sell">卖出度</option>
			</select>
			<select v-model="key" @change="showList"  style="width:100px;">
				<option v-for="(item,idx) in group"  :value="idx">{{item.key}}</option>
				<option value="sh">上证</option>
				<option value="sz">深证</option>
			</select>
			<input v-model="day" title="连续上涨天数的股票"/>
			<a onclick="app.save();"  class="mui-btn mui-btn-red mui-pull-right" >保存</a>
			<a onclick="app.move();"  class="mui-btn mui-btn-red mui-pull-right" >移动</a>
			<a onclick="app.switchUpDown();" class="mui-icon  mui-pull-right" style="line-height: 44px;margin-right: 10px;">{{flag?"∧":"∨"}}</a>

			<a onclick="app.addGroup();" class="mui-icon  mui-pull-right" style="color:red;line-height: 44px;margin-right: 10px;">+</a>
			<a onclick="app.add();" class="mui-icon  mui-pull-right" style="line-height: 44px;margin-right: 10px;">+</a>

			</div>


			<iframe v-if="isPath" :src="path" style="width:100%;height: 680px;border:0;"></iframe>

			<ul id="OA_task_1" class="mui-table-view" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
				<li class="mui-table-view-cell" v-for="(item,idx) in list" :id="'li'+idx" :style="item.keeping?'background:#f4f5fd;width:50%;':'width:50%;'" >
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-blue" @click="setting(item,idx)">设置</a>
						<a class="mui-btn mui-btn-red" @click="del(idx)">删除</a>
					</div>
					<div class="mui-slider-handle">
						<div style="display: flex;justify-content: space-between;line-height: 25px;">
							<div style="display: flex;justify-content: space-between;width:270px;">
							<div style="text-align: left;display: flex;margin-right: 20px;">
								<!-- 	<a class="mui-btn mui-btn-red" @click="move(idx)">移动</a> -->
									<div class="mui-input-row mui-checkbox mui-left" style="width:50px;">

									<input :id="idx" name="checkbox"  style="width:50px;height:30px;" type="checkbox" class="myRows">
									</div>
								<div @click="setOpen(item)" :style="item.isOpen?'color:red;':'color:gray;'" class="iconStyle mui-icon-extra mui-icon-extra-outline"></div>
								<div style="width: 110px;overflow: hidden;">
									<div @click="openK(item)">{{item.name}}</div>
									<div @click="goDetail(item.code)">{{item.code}}{{item.isUp?"↑":""}}{{item.isDown?"↓":""}}</div>
								</div>
							</div>
							<!--    现价和涨跌幅度!-->
							<div :style="item.persent>0?'color:red':'color:green'">
							<div style="widht:150px;text-align: right;font-weight: 600;font-size: 18px;">
								<div title="现价|估值|差值">{{item.price}}|{{item.pe}}|{{item.peDiv}}</div>
								<div title="涨跌幅">	{{item.persent>0?"+"+item.persent:item.persent}}<span style="font-size: 12px;"> %</span></div>
							</div>
							</div>

							</div>

							<div style="display: flex;" v-if="key=='100'">

								<div id="btns" @click="item.redFlag=!item.redFlag" :class="item.redFlag?'mui-switch mui-active':'mui-switch'">
											翻紅<div class="mui-switch-handle"></div>
								</div>
								<div id="btns" @click="item.greenFlag=!item.greenFlag" :class="item.greenFlag?'mui-switch mui-active':'mui-switch'">
											翻綠<div class="mui-switch-handle"></div>
								</div>
								<div id="btns" @click="item.upDownFlag=!item.upDownFlag" :class="item.upDownFlag?'mui-switch mui-active':'mui-switch'">
											漲跌3%<div class="mui-switch-handle"></div>
								</div>

							</div>


							<!--6天内涨跌幅度，开盘收价值比较
							<div>
								<div @click="openDell(item)">{{item.flag}}</div>
								<div @click="openDoctor(item.code)">{{item.dayPersent}}%</div>
							</div>
							!-->
							<!-- <div>
								<div>{{item.now}}</div>
								<div>{{item.pre}}</div>
							</div> -->
							<div style="display: none;">
								<div title="是否连续几日红柱" @click="openDell(item)">{{item.flag}}</div>
								<div title="今日都某几天的涨跌幅度" @click="openDoctor(item.code)">{{item.dayPersent}}%</div>
							</div>
							<div style="display:flex;justify-content: space-between;width:250px;">
							<div style="display:flex;justify-content: space-between;text-align: right;">
								<div style="margin-right: 10px;width:80px;">
										<div title="成本价">{{item.cost}}</div>
										<div title="持仓涨跌"  :style="item.cost>item.price?'color:green;':'color:red;'">{{item.myPersent}}%</div>
								</div>
								<div title="持仓涨跌" style="height:45px;border:0.5px solid black;width:10px;transform: rotate(180deg);">
									<div :style="'background-color: '+(item.myPersent>0?'red':'green')+';height:'+Math.abs(item.myPersent)+'%;width:100%;'"></div>
								</div>
							</div>

							<div style="text-align: right;">
								<div title='持仓数'>{{item.stkqty}}|<span  :style="item.nowTotal<0?'color:green':'color:red;'" title='今日收益'>{{item.nowTotal}}</span></div>
								<div :style="item.totalSum>0?'text-align: right;color:red;':'text-align: right;color:green;'" title="总收益/总价值">{{item.totalSum}}/{{item.total}}</div>
							</div>

							</div>

							<div style="width:200px;">
								<div style="text-align: right;font-weight: 600;font-size: 18px;">
									<div title="不亏本最低卖出价">
									{{item.sellPrice}}/
									<span title="扣除所有费率的盈亏" :style="item.realPrice>0?'color:red;':'color:green;'" :class="item.realPrice>0?'shake':''">{{item.realPrice}}</span>
									</div>

									<div style="font-size: 13px;">
                                       <div title="买卖分值%">
									{{item.buyScore}}<span style="font-size: 12px;"> %</span>
									{{item.sellScore}}<span style="font-size: 12px;"> %</span>
</div>
									<span title="历史最大/最小值">{{item.max}}/{{item.min}}</span>
									</div>

								</div>
							</div>

							<div style="width:100px;">
								<div v-if="item.kdjFlag">低位{{item.kdjVal.toFixed(2)}}</div>
								<div v-if="item.buyingFlag"style="color:red;" >{{item.buyingFlag}}持有...</div>
								<div v-if="item.sellFlag" class="sell" style="color:blue;" @click="sell(item)" :code="item.code">卖货</div>
								<div v-if="item.buyFlag" class="buy" style="color:red;" @click="buy(item)" :code="item.code" :stkqty ="item.stkqty">买货</div>
							<div title="操作数量">{{item.stkqNum}}</div>
							</div>
						</div>

					</div>
				</li>
			</ul>

			<!---排列菜单!-->
          <div v-if="false"  style="position: fixed;width:100%;background-color: #00000055; height:100%;top:0;z-index: 999;display: flex;">
			  <form class="mui-input-group" style=";margin:auto;padding:8px 0;border-radius: 8px;width:95%;align-self: center;">
			  	<div style="text-align: center;height:44px;line-height: 44px;border-bottom: 1px solid #cecece;">编辑目录</div>


			  	<div  class="mui-input-row" v-for="(item,idx) in group">
			  		<label>{{item.key}}</label>
			  		<input class="menuIdx" type="text"  placeholder="请输入股票代码">
			  	</div>
				<div class="mui-button-row" style="margin-top:10px;">
					<button type="button" class="mui-btn mui-btn-primary" @click="saveMenu">保存</button>&nbsp;&nbsp;
					<button type="button" class="mui-btn mui-btn-danger" @click="isEditMenu=false;closeSwipe();">取消</button>
				</div>
				</form>
		  </div>
		  <!---移动股票!-->
		  <div v-if="isAddGu"  style="position: fixed;width:100%;background-color: #00000055; height:100%;top:0;z-index: 999;display: flex;">
		  			  <form class="mui-input-group" style=";margin:auto;padding:8px 0;border-radius: 8px;width:95%;align-self: center;">
		  			  	<div style="text-align: center;height:44px;line-height: 44px;border-bottom: 1px solid #cecece;">编辑目录</div>

		  			  <ul class="mui-table-view mui-table-view-radio">
		  			  	<li class="mui-table-view-cell" v-for="(item,idx) in group"  :value="idx" @selected="setKey(idx)">
		  			  		<a class="mui-navigate-right">
								<input type="text"  v-model="item.key"></input>

		  			  		</a>
		  			  	</li>
						</ul>


		  				<div class="mui-button-row" style="margin-top:10px;">
		  					<button type="button" class="mui-btn mui-btn-primary" @click="saveGu">保存</button>&nbsp;&nbsp;
		  					<button type="button" class="mui-btn mui-btn-danger" @click="isAddGu=false;closeSwipe();">取消</button>
		  				</div>
		  				</form>
		  </div>
		  <!--编辑股票!-->
			<div v-if="isEdit" style="position: fixed;width:100%;background-color: #00000055; height:100%;top:0;z-index: 999;display: flex;">
				<form class="mui-input-group" style=";margin:auto;padding:8px 0;border-radius: 8px;width:95%;align-self: center;">
					<div style="text-align: center;height:44px;line-height: 44px;border-bottom: 1px solid #cecece;">编辑数据</div>

					<select @change="this.type=this.type" v-model="type" placeholder="请选择编辑类型">
						<option value="0">添加股票</option>
						<option value="1">批量添加持仓股票</option>
						<option value="2">批量添加关注股票</option>
					</select>
					<div v-if="type=='0'" class="mui-input-row">
						<label>代码：</label>
						<input type="text" v-model="editItem.code" placeholder="请输入股票代码">
					</div>
					<div v-if="type=='0'" class="mui-input-row">
						<label>上限：</label>
						<input type="text" v-model="editItem.up" class="mui-input-clear" placeholder="请输入提醒上限">
					</div>
					<div v-if="type=='0'" class="mui-input-row">
						<label>下限：</label>
						<input type="text" v-model="editItem.down" class="mui-input-clear" placeholder="请输入提醒下限">
					</div>
					<div  v-if="type=='0'" class="mui-input-row">
						<label>成本价：</label>
						<input type="text" v-model="editItem.cost" class="mui-input-clear" placeholder="请输入成本价">
					</div>
					<div  v-if="type=='0'" class="mui-input-row">
						<label>手数：</label>
						<input type="text" v-model="editItem.stkqty" class="mui-input-clear" placeholder="请输入手数">
					</div>
					<div  v-if="type=='0'" class="mui-input-row">
						<label>可操作手数：</label>
						<input type="text" v-model="editItem.stkqNum" class="mui-input-clear" placeholder="请输入可操作手数">
					</div>
					<div class="mui-input-row" v-if="type=='1'">
						<label>持仓：</label>
						<input type="text" v-model="editItem.list" class="mui-input-clear" placeholder="请输入持仓股">
					</div>
					<div class="mui-input-row" v-if="type=='2'">
						<label>关注：</label>
						<input type="text" v-model="editItem.list" class="mui-input-clear" placeholder="请输入关注股">
					</div>


					<div class="mui-button-row" style="margin-top:10px;">
						<button type="button" class="mui-btn mui-btn-primary" @click="saveTempData">保存</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-danger" @click="isEdit=false;closeSwipe();">取消</button>
					</div>
				</form>
			</div>
			<div v-if="showMask" @click="showMask=false" style="position: fixed;top:0;left:0;width:100%;height:600px;opacity:0.8;background:#fff;z-index:99999;text-align: center;font-size: 300px;line-height:600px;font-weight: bolder;color:red;">{{todayTotal}}</div>
            <ul class="mui-pager" v-if="key=='sh' || key=='sz'" >
					<li class="mui-previous">
						{{curPage}}
						<a  href="javascript:app.curPage--;" @click="showList">
							上一页
						</a>
					</li>
					<li class="mui-next">
						<a href="javascript:app.curPage++;" @click="showList">
							下一页
						</a>
					</li>
				</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/Dao.js"></script>
		<script src="js/GuVo.js"></script>
		<script src="Strategy2.js"></script>
	
		<script src="methods.js"></script>
		<script src="js/MakeDataHandel.js"></script>
		<script src="groupData.js"></script>
		<script src="js/FileUtil.js"></script>
		<script src="culGU.js"></script>
		<script src="guStrategy.js"></script>
		<script src="DlgsPicker.js"></script>
		<script src="buySell/buySell.js"></script>
		<script src="buySell/buys/buyByDLGS.js"></script>
		<script src="buySell/buys/buyByFiveUpTw.js"></script>
		<script src="buySell/buys/buyByRedUp.js"></script>
		<script src="buySell/buys/buyByUpDownDay.js"></script>
		<script src="buySell/buys/buyByTopFive.js"></script>
		<script src="buySell/buys/buyByThreeLine.js"></script>
		<script src="buySell/buys/buyByKDJ.js"></script>
		<script src="buySell/buys/buyByMinPrice.js"></script>

		<script src="buySell/sells/sellByDownFive.js"></script>
		<script src="buySell/sells/sellByDownPersent.js"></script>
		<script src="buySell/sells/sellByFiveDownTW.js"></script>
		<script src="buySell/sells/sellByGreen.js"></script>
		<script src="buySell/sells/sellByGreenDown.js"></script>
		<script src="buySell/sells/sellByRed.js"></script>
		<script src="buySell/sells/sellByMaxPrice.js"></script>

		<script src="buySell/extends/KDJ.js"></script>
		<script src="buySell/extends/Utils.js"></script>

		<script src="datas/sh.js"></script>
		<script src="datas/sz.js"></script>
		<script>
			var app;

			mui.init();
			(function($) {
				app = new Vue({
					el: "#mui-content",
					mixins: [myApp],
					data: function() {
						return {
							curPage:1,
							info:"",
							showMask:false,
							isPath: false,
							key:0,
							path: "",
							day:6,
							isEdit: false,
							isEditMenu:true,
							isAddGu:false,
							type: "0",//编辑类型
							isVibrate: false,
							editItem: {
								code: "sz000333",
								up: "",
								down: "",
								cost: "",
								isAdd: false,
								list:'',
							},
							list: [{
								code: "sz000333",
								name: "美的集团",
								price: 12.5,
								persent: "5"
							}],
							group: {
								"默认": [{
									code: 'sz000333'
								}]
							},
						}
					},
					created() {
						let time = 0;
						setInterval(() => {
							if(time%3==0){
								this.getPrices();
								this.calTotal();

								let work=  this.speakBuySell();
								if (work != "" ){
								//	this.speak(work);
								}
							  // location.reload();
							}

							if(time%5==0){

								if (this.key != "sh" &&  this.key != "sz" && this.group[this.key].key.indexOf("现在持有")!=-1){
									let work = "";
									work+=this.speak3Persent();
									work+=this.speakUpDown();
									work += this.speakRedGreen();


									if (work != "" ){
										//this.speak(work);
									}

								}
							}
							let t = new Date();
							let t2 = new Date();
							t2.setHours(14,30);

							// if(time%10==0 && t.getTime()>t2.getTime()){
							//    location.reload();
							// //console.log(666666666666666)
							// }
							if(time%(30*60)==0){
								if (this.group[this.key].key.indexOf("持仓")!=-1) {
									this.makeTodaySum();
								}
							}
							time++;
						}, 1000);
					},
					mounted() {
						//this.group = localStorage.getItem("group");
						//this.group = this.group ? JSON.parse(this.group) : {};

						this.group = groupData;
						let nowList;
						 this.getListByKey("现在持有",item=>{
							nowList = item.list.map(item=>{
								item.keeping=true;
								return item;
							});
						});
						let lowList;
						 this.getListByKey("低位股",item=>{
						 	lowList = item.list;
						 });
						 let merge = nowList.concat(lowList);
						 const seenIds = new Set();
						 const uniqueArr = merge.filter(item => {
						     const isDuplicate = seenIds.has(item.code);
						     seenIds.add(item.code);
						     return !isDuplicate;
						 });
							this.list =  uniqueArr;
							this.list.map(row=>{
								row.days=null;
								row.buy=row.sell=null;
							
							})



					},

				});
				//$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单
				//$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象
				//				setTimeout(function() {
				//					$.swipeoutOpen(document.getElementById("OA_task_1").querySelector('li:last-child'), 'left');
				//					setTimeout(function() {
				//						$.swipeoutClose(document.getElementById("OA_task_1").querySelector('li:last-child'));
				//					}, 1000);
				//				}, 1000);
				//第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
				// $('#OA_task_1').on('tap', '.mui-btn', function(event) {
				// 	var elem = this;
				// 	var li = elem.parentNode.parentNode;
				// 	mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				// 		if (e.index == 0) {
				// 			li.parentNode.removeChild(li);
				// 		} else {
				// 			setTimeout(function() {
				// 				$.swipeoutClose(li);
				// 			}, 0);
				// 		}
				// 	});
				// });
				// var btnArray = ['确认', '取消'];
				// //第二个demo，向左拖拽后显示操作图标，释放后自动触发的业务逻辑
				// $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
				// 	var elem = this;
				// 	mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				// 		if (e.index == 0) {
				// 			elem.parentNode.removeChild(elem);
				// 		} else {
				// 			setTimeout(function() {
				// 				$.swipeoutClose(elem);
				// 			}, 0);
				// 		}
				// 	});
				// });
				// //第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑
				// $('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) {
				// 	var elem = this;
				// 	mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				// 		if (e.index == 0) {
				// 			elem.parentNode.removeChild(elem);
				// 		} else {
				// 			setTimeout(function() {
				// 				$.swipeoutClose(elem);
				// 			}, 0);
				// 		}
				// 	});
				// });
			})(mui);
		</script>
	</body>

</html>

//(20均线总资产-当日总资产)/当日总资产
